// 文件查找的规则   先从当前文件下去查找 对应的node_modules 如果有就用自己的 
// 如果没有那么找上一层 再没有继续上一层 直到 c盘 


// const path = require('path')
const {
    resolve
} = require('path')


const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },

    module: {
        rules: [
            // 详细 loader 配置
            // 不同文件必须配置不同 loader 处理
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些 loader 进行处理
                use: [
                    // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
                    // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
                    'style-loader',
                    // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader', 'css-loader', 'less-loader'
                    // 将 less 文件编译成 css 文件
                    // 需要下载 less-loader 和 less 'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // limit: 8192,
                        // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
                        // 解析时会出问题：[object Module]
                        // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
                        esModule: false,
                        // 给图片进行重命名
                        // [hash:10]取图片的 hash 的前 10 位
                        // [ext]取文件原来扩展名
                        name: '[hash:10].[ext]'


                    },
                }, ],

            },
            {
                test: /\.html$/,
                // 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理）
                loader: 'html-loader'
            },
            //解析其他资源  字体图标


            {
                // 排除css/js/html 资源
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }



        ]
    },

    plugins: [
        // plugins 的配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
        // 需求：需要有结构的 HTML 文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
            template: './src/index.html'
        })
    ],


    mode: 'development', //开发环境       production   线上环境
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip 压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true
    }




}